<template>
	<view class="container" :style="[ctop()]" v-if="info != null">
		<view :style="[top()]" class="top abso">
			<view class="flex j-end a-center">
				<view class="flex a-center place">
					<view class="msg" @tap="goto('/pages/message')">
						<image class="image" src="../static/icon/my/my(3).png"></image>
					</view>
					<view class="msg">
						<image class="image" src="../static/icon/my/my-set.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-top">
			<image class="image" src="../static/icon/my/my-bg.png"></image>
		</view>
		<view class="rela">
			<view class="user flex a-center" v-if="true"><!--已登录-->
				<view class="head">
					<image class="image" src="https://cdn.uviewui.com/uview/common/logo.png"></image>
				</view>
				<view>
					<view class="u-name">{{info.mobile}}</view>
					<view class="flex a-center">
						<view class="item flex a-center j-center">
							<view>VIP会员</view>
						</view>
						<view class="item flex a-center j-center">
							<view>商家认证</view>
						</view>
						<view class="item flex a-center j-center">
							<view>金牌代理</view>
						</view>
						<view class="item flex a-center j-center">
							<view>已实名</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="user flex a-center"><!--未登录-->
				<view class="head"></view>
				<view>
					<view class="u-name">请先登录</view>
					<view class="flex a-center" style="font-size: 24rpx;color: #FFF;">登录领取金币收益~</view>
				</view>
			</view>
			<view class="wallet">
				<view class="flex a-center j-between">
					<view class="name">金币钱包</view>
					<view class="flex a-center detail" @tap="goto('/pages/coin-detail')">
						<view>明细</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="flex a-center j-between line2">
					<view class="flex a-center">
						<view class="coin">
							<image class="image" src="../static/icon/idx/idx(7).png"></image>
						</view>
						<view class="coin-num">{{info.point}}</view>
					</view>
					<view class="flex a-center">
						<view class="flex j-center a-center btn1" @tap="goto('/pages/recharge')">
							<view>充值</view>
						</view>
						<view class="flex j-center a-center btn2" @tap="goto('/pages/withdrawal')">
							<view>提现</view>
						</view>
					</view>
				</view>
				<view class="flex a-center j-around line3">
					<view class="item flex col a-center j-center">
						<view class="num">{{info.pint_day_count}}</view>
						<view>今日收益</view>
					</view>
					<u-line color="#999999" direction="col" length="36rpx" />
					<view class="item flex col a-center j-center">
						<view class="num">{{info.point_count}}</view>
						<view>累计收益</view>
					</view>
					<u-line color="#999999" direction="col" length="36rpx" />
					<view class="item flex col a-center j-center">
						<view class="num">{{info.point_tixian}}</view>
						<view>已提现</view>
					</view>
				</view>
			</view>
			<view class="flex a-center j-between mytask">
				<view class="name">我的接单</view>
				<view class="flex a-center detail" @tap="goto('/pages/my-task')">
					<view>全部</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="task-block flex j-between a-center">
				<view class="item flex col j-center a-center" @tap="goto('/pages/my-task?tab=1')">
					<view class="t-pic rela">
						<u-badge type="error" :count="info.dwancheng_num"></u-badge>
						<image class="image" src="../static/icon/my/my(6).png"></image>
					</view>
					<view>待完成</view>
				</view>
				<view class="item flex col j-center a-center" @tap="goto('/pages/my-task?tab=2')">
					<view class="t-pic rela">
						<u-badge type="error" :count="info.shenhe_num"></u-badge>
						<image class="image" src="../static/icon/my/my(5).png"></image>
					</view>
					<view>审核中</view>
				</view>
				<view class="item flex col j-center a-center" @tap="goto('/pages/my-task?tab=3')">
					<view class="t-pic rela">
						<u-badge type="error" :count="info.wtongguo_num"></u-badge>
						<image class="image" src="../static/icon/my/my(8).png"></image>
					</view>
					<view>未通过</view>
				</view>
				<view class="item flex col j-center a-center" @tap="goto('/pages/my-task?tab=4')">
					<view class="t-pic rela">
						<image class="image" src="../static/icon/my/my(7).png"></image>
					</view>
					<view>已完成</view>
				</view>
			</view>
			<view class="flex a-center j-between mytask">
				<view class="name">常用功能</view>
			</view>
			<view class="funcs flex wrap a-center">
				<view class="item flex col j-center a-center" v-for="(item,i) in funcs" :key="i" @tap="goto(item.src)">
					<view class="icon">
						<image class="image" :src="item.icon"></image>
					</view>
					<view class="name">{{item.name}}</view>
				</view>
			</view>
			<view style="height: 30rpx;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:null,
				funcs:[
					{src:'/pages/my-post',name:'我的发布',icon:'../static/icon/my/my(9).png'},
					{src:'/pages/invite-code',name:'邀请码',icon:'../static/icon/my/my(10).png'},
					{src:'',name:'金币商城',icon:'../static/icon/my/my(11).png'},
					{src:'/pages/vip',name:'会员中心',icon:'../static/icon/my/my(12).png'},
					{src:'/pages/service',name:'联系客服',icon:'../static/icon/my/my(13).png'},
					{src:'/pages/my-proxy',name:'我的代理',icon:'../static/icon/my/my(14).png'},
					{src:'/pages/extension',name:'我的推广',icon:'../static/icon/my/my(15).png'},
					{src:'/pages/auth',name:'实名认证',icon:'../static/icon/my/my(16).png'},
					{src:'/pages/auth-business',name:'成为商家',icon:'../static/icon/my/my(17).png'},
					{src:'/pages/auth-proxy',name:'成为代理',icon:'../static/icon/my/my(1).png'}
				]
			}
		},
		onLoad() {
			this.$api.info().then(res => {
				this.info = res.data
			})
		},
		methods: {
			top(){
				let pdt = 0
				uni.getSystemInfo({  
			        success:function(e){  
			            // #ifndef MP  
			            if(e.platform == 'android') {  
			                pdt = e.statusBarHeight  
			            }else {  
			                pdt = e.statusBarHeight + 45  
			            }  
			            // #endif  
			
			            // #ifdef MP-WEIXIN  
			            let custom = wx.getMenuButtonBoundingClientRect()  
			            pdt = custom.bottom + custom.top - e.statusBarHeight  
			            // #endif  
			
			            // #ifdef MP-ALIPAY  
			            pdt = e.statusBarHeight + e.titleBarHeight  
			            // #endif  
			        }  
			    })  
				return {paddingTop:(pdt+10)+'px'}
			},
			ctop(){
				let pdt = 0
				uni.getSystemInfo({  
			        success:function(e){  
			            // #ifndef MP  
			            if(e.platform == 'android') {  
			                pdt = e.statusBarHeight  
			            }else {  
			                pdt = e.statusBarHeight + 45  
			            }  
			            // #endif  
			
			            // #ifdef MP-WEIXIN  
			            let custom = wx.getMenuButtonBoundingClientRect()  
			            pdt = custom.bottom + custom.top - e.statusBarHeight  
			            // #endif  
			
			            // #ifdef MP-ALIPAY  
			            pdt = e.statusBarHeight + e.titleBarHeight  
			            // #endif  
			        }  
			    })  
				return {paddingTop:(pdt+44)+'px'}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
.container{padding: 0 24rpx;}
.top{height: 88rpx;padding: 18rpx 0;width: 100%;left:0;top:0;z-index: 10;
	.place{font-size: 32rpx;color:#333;
		.msg{width: 44rpx;height: 44rpx;margin-left: 28rpx;margin-right: 24rpx;}
	}
}
.bg-top{position: absolute;top: 0;right: 0;left: 0;height: 504rpx;background:#246FDD;}
.user{
	.head{width: 120rpx;height: 120rpx;border-radius: 100%;overflow: hidden;margin-right: 24rpx;
		background-color: #FFF;
	}
	.u-name{color: #FFF;font-size: 36rpx;color: #FFF;padding-left: 8rpx;margin-bottom: 24rpx;}
	.item{width: 108rpx;height: 36rpx;background: rgba(255,255,255,.1);border-radius: 200rpx;
		font-size: 20rpx;color: #FFF;margin-right: 16rpx;
	}
}
.wallet{padding: 36rpx 24rpx 48rpx;background-color: #FFF;border-radius: 16rpx;margin-top: 52rpx;
	.name{font-size: 28rpx;color: #333;}
	.detail{color: #999;font-size: 24rpx;}
	.line2{margin-top: 50rpx;
		.coin{width: 36rpx;height: 36rpx;}
		.coin-num{font-size: 36rpx;color: #333;font-weight: bold;margin-left: 8rpx;}
		.btn1{width: 144rpx;height: 48rpx;background-color: #F2F2F2;border-radius: 4rpx;font-size: 24rpx;color: #246FDD;}
		.btn2{width: 144rpx;height: 48rpx;background-color: #246FDD;border-radius: 4rpx;font-size: 24rpx;color: #fff;margin-left: 48rpx;}
	}
	.line3{margin-top: 48rpx;
		.item{font-size: 24rpx;color: #999;}
		.num{font-size: 36rpx;color: #333;font-weight: bold;margin-bottom: 24rpx;}
	}
}
.block{height: 160rpx;background: #000E8F;border-radius: 16rpx;margin-top: 24rpx;}
.mytask{margin-top: 32rpx;
	.name{font-size: 32rpx;color: #333;font-weight: bold;}
	.detail{color: #999;font-size: 24rpx;}
}
.task-block{background-color: #FFF;padding: 42rpx 22rpx 48rpx;margin-top: 32rpx;border-radius: 16rpx;
	.item{color: #333;font-size: 28rpx;
		.t-pic{width: 124rpx;height: 124rpx;}
	}
}
.funcs{padding: 54rpx 22rpx 0rpx;background-color: #FFF;border-radius: 16rpx;margin-top: 32rpx;
	.item{margin-bottom: 48rpx;width: 20%;
		.icon{width: 80rpx;height: 80rpx;}
		.name{color: #333;font-size: 24rpx;margin-top: 24rpx;}
	}
}
</style>
